<template>
  <div class="head">
    <img src="./photos/po.png" alt="" />
    <h2>广场</h2>
    <div class="pic">
      <img src="./photos/gj.jpg" alt="" />
    </div>
    <div class="changes">
      <h4>兼职社区</h4>

      <div class="adjunct">
        <img src="./photos/ad.png" @click="tag" class="round" />
        <div class="sign">
          <h5 @click="car">彭于晏</h5>
          <h6 @click="cares">上午 9:00</h6>
        </div>
        <p class="round-two">
          <span></span>
          <span></span>
          <span></span>
        </p>

        <p @click="bus" class="text">
          上星期来这家公司做兼职，不仅环境好，老板人也不错,<br />
          中午请吃饭. <i class="active">@淘宝电商美工平面设计兼职</i>
        </p>
        <ul class="photo">
          <li>
            <img src="./photos/apple.png" alt="" />
            <img
              @click="commit"
              class="other"
              src="./photos/message.png"
              alt=""
            />
            <a>x124</a>
          </li>
          <li>
            <img src="./photos/flower.png" alt="" />
            <img class="others" src="./photos/star.png" alt="" />
            <a class="op">x666</a>
          </li>
          <li>
            <img src="./photos/tree.png" alt="" />
            <img class="sky" src="./photos/love.png" alt="" />
            <a class="ops">x999</a>
          </li>
        </ul>
      </div>
      <div id="comment">
        <img src="./photos/da.png" @click="plane" class="round-a" />
        <div class="sign-a">
          <h5 @click="socket">彦祖</h5>
          <h6 @click="socketed">上午 9:00</h6>
        </div>
        <p @click="planes" class="text-a">
          上星期来这家公司做兼职，不仅环境好，老板人也不错,<br />
          中午请吃饭. <i class="active">@淘宝电商美工平面设计兼职</i>
        </p>
        <ul class="photo-a">
          <li>
            <img src="./photos/apple.png" alt="" />
          </li>
          <li>
            <img src="./photos/flower.png" alt="" />
          </li>
          <li>
            <img src="./photos/tree.png" alt="" />
          </li>
        </ul>
      </div>
      <p id="last-point">.....</p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    tag() {
      this.$router.push({
        name: "Comments",
      });
    },
    bus() {
      this.$router.push({
        name: "Comments",
      });
    },
    buses() {
      this.$router.push({
        name: "Comments",
      });
    },
    car() {
      this.$router.push({
        name: "Comments",
      });
    },
    cares() {
      this.$router.push({
        name: "Comments",
      });
    },
    plane() {
      this.$router.push({
        name: "Comments",
      });
    },
    planes() {
      this.$router.push({
        name: "Comments",
      });
    },
    socket() {
      this.$router.push({
        name: "Comments",
      });
    },
    socketed() {
      this.$router.push({
        name: "Comments",
      });
    },
    comments() {
      this.$router.push({
        name: "Comments",
      });
    },
    commit() {
      this.$router.push({
        name: "Comments",
      });
    },
  },
};
</script>

<style scoped>
.changes {
  background: #faf8f6;
}
.head h3 {
  margin: 20px 20px;
  color: deeppink;
}
.head h4 {
  margin: 20px 36px;
  font-size: 30px;
}

.head {
  background-image: url("../home/photos/l.png");
  height: 594px;
  width: 100%;
  background-size: 100% 594px;
  position: relative;
}
.head h2 {
  position: absolute;
  top: 75px;
  font-size: 40px;
  left: 40px;
}
.head img {
  height: 594px;
  width: 100%;
  font-size: 0;
}
.head .pic {
  width: 70%;
  height: 125px;
  border-radius: 20px;
  position: absolute;
  left: 100px;
  bottom: -25px;
}
.head .pic img {
  width: 100%;
  height: 100%;
  border-radius: 27px;
}
.adjunct {
  display: flex;
  flex-direction: column;
  width: 680px;
  height: 482px;
  margin: 16px 32px;
  border-radius: 10px;
  background-color: #fff;
}
.adjunct .round {
  width: 76px;
  height: 76px;

  border-radius: 50%;
  margin: 40px 40px;
}
.adjunct .sign {
  width: 124px;
  height: 74px;

  margin: 0 132px;
  margin-top: -114px;
}
.adjunct .sign h5 {
  text-indent: 6px;
  font-size: 28px;
}
.adjunct .sign h6 {
  margin-top: 8px 0;
  color: #999999;
}

.adjunct .round-two {
  width: 100px;
  height: 40px;
  background: orange;
  border-radius: 40px;
  margin: 0px 540px;
  margin-top: -90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.adjunct .round-two span {
  width: 10px;
  height: 10px;
  display: block;
  border-radius: 50%;
  background: #fff;
  margin: 0 6px;
}
.adjunct .text {
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin: 60px 36px;
  font-size: 26px;
}
.adjunct .text .active {
  color: #fbd669;
}
.photo {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 180px;

  margin-top: -20px;
}
.photo li {
  width: 184px;
  height: 100px;
  margin: 20px 40px;
  position: relative;
}
.photo li img {
  width: 130px;
  height: 130px;
  display: flex;
  border-radius: 20px;
}
.photo li .other {
  width: 42px;
  height: 34px;
  margin: 36px 10px;
  border-radius: 0;
}
.photo li a {
  position: absolute;
  right: 33px;
  top: 167px;
  color: #30c8f2;
}
.photo li .others {
  width: 45px;
  height: 36px;
  margin: 30px 10px;
  border-radius: 0;
}
.photo li .op {
  position: absolute;
  right: 32px;
  top: 166px;
  color: #fed547;
}
.photo li .sky {
  width: 46px;
  height: 38px;
  margin: 30px 10px;
  border-radius: 0;
}
.photo li .ops {
  position: absolute;
  right: 35px;
  top: 168px;
  color: #ff5e5e;
}

.photo li i {
  margin: 35px 11px;
}
.photo li i {
  font-size: 30px;
}

#comment {
  display: flex;
  flex-direction: column;

  height: 390px;

  margin: 20px 36px;
  border-radius: 10px;
  background: #fff;
}
#comment .round-a {
  width: 120px;
  height: 120px;

  border-radius: 50%;
  margin: 0px 32px;
}
#comment .sign-a {
  width: 134px;
  height: 74px;

  margin: 0 132px;
  margin-top: -86px;
}
#comment .sign-a h5 {
  text-indent: 6px;
  font-size: 28px;
}
#comment .sign-a h6 {
  margin-top: 8px 0;
  color: #999999;
}
#comment .text-a {
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin: 20px 36px;
  font-size: 26px;
}
#comment .text-a i {
  color: #fbd669;
}
.photo-a {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 180px;

  margin-top: -10px;
}
.photo-a li {
  width: 184px;
  height: 100px;
  margin: 60px 40px;
}
.photo-a li img {
  width: 130px;
  height: 130px;
  display: flex;
  border-radius: 20px;
  background-color: #fbd669;
}
#last-point {
  font-size: 84px;
  margin: 0 315px;
  margin-top: -8px;
}
</style>
